<template>
  <div v-if="realTimeQuotes[symbol]" class="k-shang">
    <div class="left">
      <p>
        <strong>{{ realTimeQuotes[symbol].last | priceFormat(coinPair.decimals) }}</strong>
      </p>
      <p class="color-gray">
        ≈{{ currency.symbol }}{{ symbol | currencyPrice('last') | numberFormat(2) }}
        <span :class="{die: realTimeQuotes[symbol] && (realTimeQuotes[symbol].last < realTimeQuotes[symbol].open)}">{{ realTimeQuotes[symbol] | fluctuation }}</span>
      </p>
    </div>
    <div class="right">
      <p class="color-gray">
        <span class="color-gray">{{ $t('24h最高') }}</span>{{ realTimeQuotes[symbol].high | numberFormat(2) }}
      </p>
      <p class="color-gray">
        <span class="color-gray">{{ $t('24h最低') }}</span>{{ realTimeQuotes[symbol].low | numberFormat(2) }}
      </p>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data () {
    const { symbol } = this.$route.query
    return {
      symbol
    }
  },
  computed: {
    ...mapState({
      currency: ({ currency }) => currency,
      realTimeQuotes: ({ market }) => market.realTimeQuotes
    }),
    ...mapGetters({
      coinPair: 'market/coinPair'
    })
  }
}
</script>
<style scoped>
.k-shang {
  background-color: #171e31;
  padding-bottom: 4px;
}
.color-gray {
  color: #929db1!important;
}
</style>
